<%@ page import="java.util.Date" %><%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/4/23
  Time: 4:23 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style>
    #content_body img{
        width: 80px;
        height: 80px
    }

    #content_body
    {

        height: 1000px;
        width: 100%;

    }

    .text_slice {
        width: 250px;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #footer{
        width: 100%;
        height: 55px;
        background: rgba(1,0,0,0.4);
        /*background-color: #000;*/
        opacity: 0.4;
        /*position: fixed;*/
        /*bottom: 0;*/
    }
</style>
<div class="table-responsive">

    <table class="table" style="height: 300px">
        <caption>我的购物车信息</caption>
        <thead>
        <tr>
            <th>
                <label  class="mb-0"style="">全选</label>
                <input type="checkbox" onclick="setAll()" id="allchecked">
            </th>
            <th>序号</th>
            <th>产品图</th>
            <th>车型</th>
            <th>车系</th>
            <th>单价</th>
            <th>购买数量</th>
            <th>产品描述</th>
            <th>操作</th>
        </thead>
        <tbody id="content_body" >
        <c:forEach items="${carts}" var="c" varStatus="vs">
            <tr>
                <td><input name="cks" id="checkId"  type="checkbox" value="${c.id}" onclick="count_purcase(this) "></td>
                <td>${vs.count}</td>
                <td>     <img src="http://localhost:80/car/${c.caPhoto}"></td>
                <c:forEach items="${carBrandsList}" var="b">
                    <c:if test="${c.cbrId == b.id}">
                        <td>${b.brName}</td>
                    </c:if>
                </c:forEach>
                <c:forEach items="${carStylesList}" var="s">
                    <c:if test="${c.cbrId == s.id}">
                        <td>${s.stName}</td>
                    </c:if>
                </c:forEach>


                <td class="hidden">${c.caPrice}w</td>
                <td>${c.caPrice}</td>
                <td><button onclick="changeNum(this,${c.id})" style="width: 20px" type="button">-</button>
                    <input onkeydown="cc(this,${c.id})" style="width: 30%;display: inline" class="form-control" type="text" value="${c.counts}"><button onclick="changeNums(this,${c.id})" style="width: 20px" type="button">+</button></td>
                <td onmouseover="tt(this)" onmouseout="t2(this)" class="text_slice">${c.cdesc}</td>

                <td><button class="btn btn-link text-danger" onclick="del(this,${c.id})"><span class="text-danger glyphicon glyphicon-trash"></span></button></td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

<%--    <%@include file="../common/page2.jsp"%>--%>

    <div id="footer">
<%--        <label  class="mb-0"style="color: black;font-size: 20px">全选</label>--%>
<%--        <input type="checkbox" class="checkbox-input" onclick="setAll()" id="allchecked" style="color: black">--%>
        <div class="row">
            <div class="col-md-offset-4 col-md-3" style="padding-top: 10px">
                <span class="text-danger" style="font-size: 20px">共计<span id="count_span">0</span>件,总价<span id="total">0.0</span>元</span>
            </div>
            <div class="col-md-offset-2 col-md-3">
                <div style="text-align: right;padding-right: 20px;padding-bottom: 5px">
                    <button type="button" onclick="purcase()" class="btn btn-lg btn-warning"><i class="layui-icon layui-icon-rmb"></i>去结算</button>
                </div>
            </div>
        </div>

    </div>

    <div>

       <jsp:include page="../footer.jsp" flush="true"></jsp:include>

    </div>

</div>
<script src="/boot/js/jquery.js"></script>
<script src="/boot/js/bootstrap.min.js"></script>
<script src="/boot/js/jquery.fancybox.pack.js"></script>
<script src="/boot/js/jquery.fancybox-media.js"></script>
<script src="/boot/js/owl.js"></script>
<script src="/boot/js/appear.js"></script>
<script src="/boot/js/jquery-ui.js"></script>
<script src="/boot/js/wow.js"></script>
<script src="/boot/js/script.js"></script>
<script src="/boot/llr/layui-v2.6.5/layui/layui.js"></script>
<script>

    //结算按钮
    function purcase(){

        window.location="/boot/user/pay";
    }
        //结算按钮
        function purcase(){
            let cks = document.getElementsByName("cks");//返回的是一个数组
            //定义一个变量
            let sids = "";
            for(let i=0;i<cks.length;i++){
                if(cks[i].checked){
                    sids+=cks[i].value+":";
                }
            }
            sids = sids.substring(0,sids.length-1);

            window.location = "/boot/user/pay";
        }

        function count_purcase(obj){
            let span = $("#count_span");
            let total_span=$("#total");
            if(obj.checked){

                let v = parseFloat($(obj).parent().parent().find("td").eq(6).text());
                console.log(v);
                total_span.text(parseFloat(total_span.text())+v);
                span.text(parseInt(span.text())+1);
            }else{
                let v = parseFloat($(obj).parent().parent().find("td").eq(6).text());
                total_span.text(parseFloat(total_span.text())-v);
                span.text(parseInt(span.text())-1);
            }
        }



        function tt(obj){
            obj.className="";
        }

        function t2(obj){
            obj.className="text_slice";
        }

        function changeNums(obj,cid){
            let input_obj = obj.previousElementSibling;
            input_obj.value = parseInt(input_obj.value)+1;

            let product_price = parseFloat($(obj).parent().prev().prev().text());

            $(obj).parent().prev().text((parseFloat(input_obj.value)*product_price).toFixed(2));
            change_product_num(cid,input_obj,obj);
        }

        function changeNum(obj,cid){
            let input_obj = obj.nextElementSibling;
            input_obj.value = parseInt(input_obj.value)-1;

            let product_price = parseFloat($(obj).parent().prev().prev().text());

            $(obj).parent().prev().text((parseFloat(input_obj.value)*product_price).toFixed(2));

            change_product_num(cid,input_obj,obj);
        }

        // // ajax发送请求到后台
        function change_product_num(cid,input_obj,btn_obj){
            let counts = input_obj.value;
            $.post('/boot/carts/updateCart',{'counts':counts,'cid':cid},function(data){
                if(data.code=="200"){
                    let product_price = parseFloat($(btn_obj).parent().prev().text());
                    $(btn_obj).parent().next().text(parseFloat(input_obj.value)*product_price);
                    alert("更新成功")
                }
            });
        }


    function del(obj,id){
                //do something
                $.post('/boot/carts/deleteCart',{"id":id},function(data){
                    if(data.code=="200"){
                        //js操作dom - 把tr标签从tbody标签删除
                        $(obj).parent().parent().remove();

                        alert("删除成功")

                    }else{
                        alert("删除失败")
                    }
                });

                layer.close(index);

    }


</script>
